<template>
  <div class="about">
      <el-header>
    <!-- 头部区域，增加用户相关内容 -->
     <i class="el-icon-s-home">课程管理系统</i>
      <!-- 右侧用户区域，用 flex 推到右边 -->
      <div class="user-area">
        <el-dropdown trigger="click">
          <span class="el-dropdown-link">
            用户
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>个人信息</el-dropdown-item>
            <el-dropdown-item>退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <el-menu router default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
          background-color="#324157" text-color="#80A59D" active-text-color="#296EB4">
          <el-menu-item index="/about">
            <i class="el-icon-s-data"></i>
            <span slot="title">管理员首页</span>
          </el-menu-item>
          <el-menu-item index="/three">
            <i class="el-icon-potato-strips"></i>
            <span slot="title">系管理</span>
          </el-menu-item>
          <el-menu-item index="3">
            <i class="el-icon-chat-line-round"></i>
            <span slot="title">专业管理</span>
          </el-menu-item>
          <el-menu-item index="4">
            <i class="el-icon-wallet"></i>
            <span slot="title">班级管理</span>
          </el-menu-item>
          <el-menu-item index="5">
            <i class="el-icon-notebook-2"></i>
            <span slot="title">学生管理</span>
          </el-menu-item>
          <el-menu-item index="6">
            <i class="el-icon-school"></i>
            <span slot="title">教师管理</span>
          </el-menu-item>
          <el-menu-item index="7">
            <i class="el-icon-suitcase-1"></i>
            <span slot="title">课程管理</span>
          </el-menu-item>
          <el-menu-item index="8">
            <i class="el-icon-reading"></i>
            <span slot="title">选课管理</span>
          </el-menu-item>
          <el-menu-item index="9">
            <i class="el-icon-monitor"></i>
            <span slot="title">管理员管理</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main>
        <p>课程管理系统</p>
        <router-view>
        </router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script>

</script>

<style lang="scss">
.about {
  height: 100vh; /* 使用视口高度 */
  display: flex;
  flex-direction: column;
}

.el-header {
  background-color: #242F42;
  color: #fff;
  text-align: left;
  line-height: 60px;
  font-size: 25px;
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}

.user-area {
  cursor: pointer;
}

.el-container {
  flex: 1; /* 关键：占据剩余空间 */
  height: calc(100% - 70px); /* 减去 header 高度 */
}

.el-aside {
  height: 100%; /* 继承父容器高度 */
  background-color: #324157;
}
</style>